<template>
  <div class="content-box">
    <div class="top-content">
      <div class="top-content-box">
        <div class="top-content-tipsTitle">警告:</div>
        <div class="top-content-button">
          <el-button class="button-padding" type="primary" @click="handleEdit">{{ editShowName }}</el-button>
          <el-button v-if="editStatus" class="button-padding" type="primary" @click="handleSave">保存</el-button>
        </div>
      </div>
      <div class="top-content-tips">
        设置招聘热度时请注意合理性，编辑时可实时查看右边热度变化趋势，一旦修改将对职业大全PC端、小程序端都产生影响，修改保存后展示图表可能不会立即生效，数据会在整点时刻进行刷新，请前往职业大全PC端和小程序查看验证该职业招聘热度展示是否正确！
      </div>
      <div class="bottom-box"></div>
    </div>
    <div class="bottom-content">
      <div class="left-box">
        <div class="content-item" v-for="(item, index) in showHeatTrend" :key="index" :style="
            editStatus
              ? 'height:60px;border-bottom: 1px solid #dcdfe6 !important;'
              : 'height:60px;border-bottom: 1px solid #dcdfe6 !important;'
          ">
          <div class="city">
            {{ item.name }}
          </div>
          <el-input v-model="item.salary" :disabled="!editStatus" :placeholder="'请输入合理的' + item.name + '热度'"
            @input="handleRowClick(item)"></el-input>
          <div class="rmb">热度</div>
        </div>
      </div>

      <div class="h100" ref="line_echartDom"></div>
    </div>
  </div>
</template>
<script>
import { updateBaseSalary, getBaseSalary } from "@/api/salary";
import { reqStatisticBurry } from "@/api/home.js";
export default {
  name: "percentSalarySetting",
  components: {},
  props: {
    heatTrend: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      positionId: "",
      loading: false,
      editShowName: "编辑",
      editStatus: false,
      myChart: null,
      chartData: {},
      showHeatTrend: [],
    };
  },
  watch: {
    heatTrend: {
      handler(newValue, oldValue) {
        this.showHeatTrend = newValue;
      },
      immediate: true,
    },
  },
  created() {
    this.positionId = this.$route.query.id;
    this.showHeatTrend = this.heatTrend;
    // this.getData();
  },
  mounted() {
    this.chartData = this.handleData(this.showHeatTrend);
    this.init();
  },
  methods: {
    getData() {
      this.loading = true;
      let params = {
        ylPositionId: this.positionId,
      };
      //console.log("params---getBaseSalary--------->--------->", params);
      getBaseSalary(params)
        .then((res) => {
          this.loading = false;
          if (+res.code === 200) {
            this.showHeatTrend = res.data.heatTrend;
            //console.log("getBaseSalary--------->", this.showHeatTrend);
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    handleData(data) {
      // 降序
      // data.sort((a, b) => {
      //   return b.salaryNum - a.salaryNum;
      // });
      let dataArr = {
        xKey: [],
        yValue: [],
      };
      data.forEach((element) => {
        dataArr.xKey.push(element.name);
        dataArr.yValue.push(element.salary);
      });
      return dataArr;
    },
    init() {
      if (!this.$refs["line_echartDom"]) return;
      //console.log("chartData-------->", this.chartData);
      this.myChart = this.$echarts.init(this.$refs["line_echartDom"]);
      let xKey = this.chartData.xKey,
        yValue = this.chartData.yValue; //this.chartData.yValue;
      //console.log("chartData-------->", xKey, yValue);
      let option = {
        xAxis: {
          type: "category",
          data: xKey,
          name: "(月份)",
          interval: 0,
          // boundaryGap: false,
          axisLabel: {
            // formatter(val) {
            //   // 当字符串长度超过2时
            //   if (val.length > 2) {
            //     // 把字符串分割成字符串数组
            //     const array = val.split("");
            //     const index = array.indexOf("市");
            //     //在下标2处删除0个，加上回车
            //     array.splice(index, 1);
            //     return array.join("");
            //   } else {
            //     return val;
            //   }
            // },
            color: "#8193B2",
            // fontSize: "13px",
          },
          axisLine: {
            lineStyle: {
              color: "#E4EDF8",
            },
          },
          nameTextStyle: {
            lineHeight: 30, //标题行高
            color: "#8193B2",
            verticalAlign: "top", //标题位置
            padding: [-2, 0, 0, 0], // 上右下左与原位置距离
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: "#000000",
            },
          },
          backgroundColor: "#FB9A3E",
          borderColor: "#FB9A3E",
          textStyle: {
            color: "#fff",
          },
          formatter: (params) => {
            const content = params[0];
            return `${content.name}月热度平均值 ${content.value}`;
          },
          // position: ["50%", 0],
        },
        grid: {
          // top: "12%",
          left: "8",
          right: "80",
          // right: "4%",
          bottom: "0",
          containLabel: true,
        },
        yAxis: {
          type: "value",
          min: 0,
          max: 100,
          // scale: true,
          name: "(热度值)",
          axisLabel: {
            color: "#8193B2",
            fontSize: "12px",
          },
          axisLine: {
            lineStyle: {
              color: "#E4EDF8",
            },
          },
          nameTextStyle: {
            padding: [0, 45, 10, 35], // 上右下左与原位置距离

            color: "#8193B2",
          },
        },
        series: [
          {
            data: yValue,
            type: "line",
            symbol: "circle", // 设置折线图上的点为圆形
            symbolSize: 10, // 设置折线图上的点的大小
            smooth: true,
            label: {
              show: true,
              position: "top",
              color: "#888",
            },
            labelLayout: {
              draggable: true, // 开启拖拽功能
            },
            showBackground: false,
            barWidth: "18px",
            itemStyle: {
              normal: {
                color: this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    //只要修改前四个参数就ok
                    offset: 0,
                    color: "#FFC48C",
                  }, //柱图渐变色
                  {
                    offset: 1,
                    color: "#BCF3C6",
                  },
                ]),
                borderRadius: [4, 4, 0, 0],
              },
            },
            emphasis: {
              itemStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#FF9735", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#77D98A", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
          },
        ],
      };
      this.myChart.on("mouseover", (params) => {
        //console.log("mouseover----------->", params);
        this.$emit("update:hoverValue", params.value + "");
        this.$emit("update:hoverName", params.name);
      });
      option && this.myChart.setOption(option);

      window.addEventListener("resize", () => {
        if (this.myChart) {
          this.myChart.resize();
        }
      });
      this.myChart.on("drag", (params) => {
        //console.log("drag----------->", params);
        var dataIndex = params.dataIndex; // 获取被拖拽的数据索引
        var seriesIndex = params.seriesIndex; // 获取被拖拽的系列索引
        var value = params.value[1]; // 获取拖拽后的数值

        // 在此处可以根据需要更新数据或执行其他操作
        // ...

        // 更新折线图上被拖拽点的数值
        option.series[seriesIndex].data[dataIndex] = value;

        // 刷新图表
        this.myChart.setOption(option);
      });
      document.addEventListener("fullscreenchange", function () {
        if (this.myChart) {
          this.myChart.resize();
        }
      });
      this.myChart.dispatchAction({
        type: "showTip",
        seriesIndex: 0,
        dataIndex: 1,
      });
      this.$emit("update:hoverValue", this.chartData.yValue[1]);
      this.$emit("update:hoverName", this.chartData.xKey[1]);
    },

    handleEdit() {
      if (this.editStatus) {
        this.$confirm(
          "现在退出将无法保存你修改的数据，是否现在退出编辑？",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        ).then(() => {
          this.editStatus = false;
          this.editShowName = "编辑";
          this.getData();
        });
      } else {
        this.editStatus = true;
        this.editShowName = "退出编辑";
      }
    },
    handleSave() {
      this.loading = true;
      let params = {
        ylPositionId: this.positionId,
        heatTrend: this.showHeatTrend,
      };
      //   //console.log("params---getData--------->", params);
      updateBaseSalary(params)
        .then((res) => {
          this.loading = false;
          if (+res.code === 200) {
            this.editStatus = false;
            this.editShowName = "编辑";
            this.$message({
              message: res.status_desc,
              type: "success",
            });
            this.addLog();
          } else {
            this.$message({
              message: res.status_desc,
              type: "warning",
            });
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    addLog() {
      const params = {
        burryPage: "/#/position",
        eventType: "4",
        description: "职业热度模型编辑",
        ylPositionId: this.positionId,
      };
      reqStatisticBurry(params);
    },
    handleRowClick(item) {
      // 使用正则表达式过滤非数字和小数点字符
      item.salary = item.salary.replace(/[^0-9.]/g, "");

      // 获取小数点的索引位置
      const dotIndex = item.salary.indexOf(".");

      // 如果小数点存在且小数点后有多于一位的数字，则截取小数点后一位
      if (dotIndex !== -1 && item.salary.length - dotIndex > 3) {
        item.salary = item.salary.slice(0, dotIndex + 3);
      }
      if (item.salary < 0) {
        item.salary = 0;
      }
      if (item.salary > 100) {
        item.salary = 100;
      }
      //console.log("handleRowClick----------->", this.chartData.yValue);
      this.chartData = this.handleData(this.showHeatTrend);
      // 使用setOption方法刷新图表
      this.myChart.setOption({
        series: [
          {
            data: this.chartData.yValue,
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content-box {
  display: block;
  padding: 14px 14px 14px 14px;
  background: #fff;

  .top-content {
    width: 100%;
    //   height: 100px;
    .top-content-box {
      display: flex;
      height: 60px;
      padding: auto 20px;
      align-items: center;
      justify-content: space-between;
      background-color: #fff;
      .top-content-tipsTitle {
        font-size: 24px;
        font-weight: bold;
        color: #ea0d0d;
      }
      .top-content-button {
        display: flex;

        .button-padding {
          padding-right: 20px;
        }
      }
    }
    .top-content-tips {
      color: #555;
      font-size: 14px;
      padding: 10px 0px;
      // height: 60px;
      line-height: 30px;
    }
    .right-box {
      background-color: rgb(206, 24, 124);
    }
  }

  .bottom-content {
    display: flex;
    width: 100%;
    height: 500px;
    // overflow-y: auto;
    .left-box {
      display: block;
      width: 40%;
      height: 500px;
      overflow-y: auto;
      .content-item {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        //   border-top: 1px solid #dcdfe6 !important;
        border-bottom: 1px solid #dcdfe6 !important;
        .city {
          width: 80px;
        }
        .rank {
          width: 50px;
          text-align: center;
        }
        .rmb {
          padding-left: 5px;
          font-size: 18px;
          // font-weight: bold;
          color: #555;
        }
      }
    }
    .h100 {
      width: 60%;
      align-items: center;
      height: 280px;
      margin-top: 80px;
      margin-left: 20px;
    }
  }
  //   ::v-deep .el-select {
  //     height: 32px;
  //   }
  ::v-deep .el-input {
    width: 215px;
    text-align-last: right;
    // text-align: center;
  }
  ::v-deep .el-input.is-disabled .el-input__inner {
    background-color: #f5f7fa;
    border-color: #e4e7ed;
    color: #222;
    cursor: not-allowed;
    font-size: 16px;
  }
  ::v-deep .el-icon-sort {
    width: 80px;
    text-align: center;
  }
  ::v-deep .el-select .el-input__inner {
    height: 40px;
  }
  ::v-deep .el-select-dropdown__item.selected {
    color: #1890ff;
    font-weight: 700;
  }
}
</style>
